<template>
	<view class="login">

		<swiper vertical="true" style="height: 100vh;">
			<!-- 第一页面 -->
			<swiper-item>
				<scroll-view scroll-y="true">
					<view class="login-tel">
						<view class="tel-mian">
							<!-- 关闭按钮 -->
							<view class="close" @click="goBack">
								<image class="close-img" src="../../static/img/login/close.png" mode=""></image>
							</view>
							<!-- logo -->
							<view class="logo">
								<image class="logo-img" src="../../static/img/login/logo.png" mode=""></image>
							</view>
							<!-- 手机注册 -->
							<view class="tel">
								<text class="tel-text">手机号注册</text>
							</view>
							<!-- 其他登录方式 -->
							<LoginOther></LoginOther>
							<view class="login-go">
								<view class="">已有账号去登录</view>
								<image src="../../static/img/login/down.png" mode=""></image>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<!-- 第二页面 -->
			<swiper-item>
				<scroll-view scroll-y="true">
					<view class="login-tel">
						<view class="tel-mian">
							<!-- 关闭按钮 -->
							<view class="close close-second">
								<view class="" @click="goBack">
									<image class="close-img" src="../../static/img/login/close.png" mode=""></image>
								</view>
								<view class="login-go">
									<image src="../../static/img/login/up.png" mode=""></image>
									<view class="">没有账号，去注册</view>
								</view>
								<view class=""></view>
							</view>
							<!-- 登录输入框 -->
							<view class="login-form">
								<view class="login-user">
									<text class="user-text">账号：</text>
									<input type="text" placeholder="请输入手机号/昵称">
								</view>
								<view class="login-user">
									<text class="user-text">密码：</text>
									<input type="text" placeholder="6-15位字符">
								</view>
							</view>
							<view class="login-quick">
								<view class="">忘记密码？</view>
								<view class="">免密登录</view>
							</view>
							<!-- 登录按钮 -->
							<view class="login-button">登录</view>
							<view class="reminder">温馨提示：您可以选择免密登录，更加方便</view>
							<LoginOther></LoginOther>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	import loginOther from "@/components/login/login-other.vue";
	export default {
		components: {
			LoginOther: loginOther
		},
		data() {
			return {

			}
		},
		methods: {
			// 关闭当前页,返回上一页
			goBack(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style scoped>
	.login-tel {
		width: 100vw;
		height: 100vh;
	}

	.tel-mian {
		padding: 0 20rpx;
	}

	.close {
		padding: 100rpx 0;
	}

	.close-img {
		width: 60rpx;
		height: 60rpx;
	}

	.logo {
		margin-bottom: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		/* background-color: red; */
	}

	.logo-img {
		border: 5rpx solid #000000;
		border-radius: 50%;
		/* background-color: #49BDFB; */
		/* color: #ffffff; */
		padding: 40rpx;
		height: 200rpx;
		width: 200rpx;
	}

	.tel {
		width: 100%;
		text-align: center;
		align-items: center;
	}

	.tel-text {
		height: 80rpx;
		line-height: 80rpx;
		color: #ffffff;
		background-color: #49BDFB;
		border: 2rpx solid #ffffff;
		border-radius: 40rpx;
		padding: 20rpx 250rpx;
		font-size: 32rpx;
	}

	.login-go {
		padding-top: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.login-go image {
		height: 60rpx;
		width: 60rpx;
	}

	/* 第二页面 */
	.close-second {
		display: flex;
		align-items: center;
	}

	.close-second>view {
		flex: 1;
	}

	.login-form {
		padding-top: 100rpx;
	}

	.login-user {
		font-size: 32rpx;
		padding: 15rpx 0;
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #a2a2a2;
	}

	.user-text {
		padding-right: 30rpx;
	}

	.login-quick {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
	}

	.login-button {
		text-align: center;
		font-size: 32rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #ffffff;
		background-color: #49BDFB;
		border: 2rpx solid #ffffff;
		border-radius: 40rpx;
	}

	.reminder {
		color: #a2a2a2;
		padding: 40rpx 0 20rpx 0;
		text-align: center;
	}

	/* 第二页面 end */
</style>
